<template>
  <!-- 二级菜单 -->
  <el-sub-menu v-if="item.children" :index="item.url" @click="add1(item.name, item.url, item.icon)">
    <template #title>
      <el-icon>
        <component :is="item.icon" />
      </el-icon>
      <span>{{ item.name }}</span>
    </template>
    <!-- 递归调用自身 二级以上菜单 -->
    <my-menu v-for="child in item.children" :key="child.url" :item="child"></my-menu>
  </el-sub-menu>
  <!-- 一级菜单 -->
  <el-menu-item :index="item.url" v-else @click="add(item.name, item.url, item.icon)">
    <el-icon>
      <component :is="item.icon" />
    </el-icon>
    <span>{{ item.name }}</span>
  </el-menu-item>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyMenu", // 你可以给组件起一个名字
  props: {
    item: {
      type: Object, // 使用普通的对象类型
      required: true, // 必传
    },
  },
  setup() {
    function add(a, b, c) {
    }
    function add1(a, b, c) {
    }
    return { add,add1 };
  },
});
</script>
<style scoped lang="less"></style>
